<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: #6ff;
            margin: 50px;
        }
    </style>
</head>

<body>
    <!--  内联JS绑定事件 -->
    <!-- <div class="box" onclick="alert(11111)"></div> -->
    <div class="box"></div>

    <button class="btn">点击清除</button>
</body>
<script>
    // 清除一个元素绑定事件的几种方式:
    // 1. 内联JS绑定事件  => 删除:  ele.removeAttribute("onclick")
    // 2. DOM一级事件(赋值式) =>     box.onclick = null;
    // 3. DOM二级事件(事件监听) =>

    // 添加事件监听
    // ele.addEventListener(type,callback,useCapture)
    // ele  绑定事件的元素
    // type 绑定事件的类型 (click dblclick mousedown)
    // callback  事件触发时执行的函数 (函数中的this->绑定事件的元素)
    // useCapture 是否在捕获阶段触发事件(默认:false)

    // 删除事件监听
    // ele.removeEventListener(type,callback,useCapture)
    // ele  绑定事件的元素
    // type 绑定事件的类型 (click dblclick mousedown)
    // callback  事件触发时执行的函数 (对应函数的引用清除)
    // useCapture 是否在捕获阶段触发事件(默认:false)

    // DOM一级事件(赋值式)
    // var box = document.getElementsByClassName("box")[0];
    // box.onclick = function () {
    //     alert(11111);
    // }
    // box.onclick = function () {
    //     alert(22222);
    // }
    // console.log(box.onclick);

    // box.onclick = null;




    var box = document.getElementsByClassName("box")[0];
    var btn = document.getElementsByClassName("btn")[0];

    // 对象 => 引用类型
    // [1,2,3] ===  [1,2,3]  不是同一个数组


    function clickHandler_1(e) {
        alert(11111);
    }
    var clickHandler_2 = function (e) {
        this.style.backgroundColor = randColor();
    }

    box.addEventListener("click", clickHandler_1);

    box.addEventListener("click", clickHandler_2);

    // 点击btn时,清除box上的事件
    btn.addEventListener("click", function () {
        console.log("清除事件");
        box.removeEventListener("click", clickHandler_1);

        box.removeEventListener("click", clickHandler_2);
    })



    function randColor() {
        var str = "0123456789abcdef";
        var colorStr = "#";
        for (var i = 0; i < 6; i++) {
            var index = Math.floor(Math.random() * str.length);
            var char = str.charAt(index);
            colorStr += char;
        }
        return colorStr;
    }


</script>

</html>